
////////////////////  bx - grid-list  ////////////////////

ul.cm-grid-list
	$-border-color = $cm-color-splitter
	$-item-height = 50px
	$-item-padding-v = ($-item-height - $cm-font-size * $cm-line-height) / 2
	$-item-padding-h = 5px
	$-item-label-padding-left = $cm-font-size * 1.5 + $cm-content-padding
	$-item-label-padding-right = $cm-content-padding
	$-item-label-input-offset-top = $cm-font-size * (($cm-line-height - 1) / 2)

	clearfix()
	font-size $cm-font-size
	line-height $cm-line-height
	border-top 1px solid transparent
	border-left 1px solid $-border-color

	// list item style
	> li
		float left
		box-sizing border-box
		// to collapse h border
		margin-top -1px
		// `li` can't always fill full width of `ul`, so we have to let `li` draw h border
		border 1px solid $-border-color
		border-left none

		> a
		> label
			display block
			overflow ellipsis
			/html.no-touch &:hover
				background-color $cm-color-hover
			/html.no-touch &:active
				background-color $cm-color-active
		> label
			padding $-item-padding-v $-item-label-padding-right $-item-padding-v $-item-label-padding-left
			cursor pointer
			// use `:active` and bg color to improve responsivity, instead of touch-highlight
			/html.touch &:active
				background-color $cm-color-active
			> input[type='radio']:first-child
			> input[type='checkbox']:first-child
				float left
				margin-left (- $cm-font-size * 1.5)
				margin-top $-item-label-input-offset-top
		> a
			padding $-item-padding-v $-item-padding-h
			text-align center
			text-decoration none
			color inherit

		// selected item
		&.selected > a
		> a.selected
				color white
				// to overlap onto borders of `li` in the following line
				outline 1px solid $cm-color-fg
				position relative

				/html.cmui &
					background-color $cm-color-fg

// width of list item
ul.cm-grid-list
	// default width
	> li
		min-width 4em
		width 50%

	// flexible
	&.cm-grid-list-flexible
		$-medium = 'screen and (max-width: 359px)'
		@media $-medium
			&.cm-grid-list-with-long-text > li
				width 50%
			> li
				width 33.3333%
		$-medium = 'screen and (min-width: 360px) and (max-width: 567px)'
		@media $-medium
			> li
				width 33.3333%
		$-medium = 'screen and (min-width: 568px)'
		@media $-medium
			> li
				width 20%
